<template>
  <div class="taskPublishing">
    <div class="top_img" :style="'background-image: url(' + topBg + ')'">
      <span>校 互 助 物 品</span>
    </div>
    <div class="main">
      <div class="col_title">
        <span>
          {{ initData.goodsName }}
        </span>
        <i></i>
      </div>
      <div class="name_time_tel">
        <span> 奖励：{{ initData.prices }} </span>
        <span> 发布人：{{ initData.createdBy }} </span>
        <span> 手机号：{{ initData.telephone }} </span>
        <span>
          发布时间：
          {{
            $moment(parseInt(initData.createdAt)).format("YYYY-MM-DD HH:mm:ss")
          }}
        </span>
        <span>
          <el-tag v-if="initData.status == 0">待接单</el-tag>
          <el-tag type="success" v-if="initData.status == 1">已接单</el-tag>
          <el-tag type="warning" v-if="initData.status == 2">已解决</el-tag>
        </span>
      </div>

      <div class="col_content">
        {{ initData.goodsContent }}
      </div>

      <div class="btn">
        <el-button round @click="clickTakeOrders" v-if="!initData.status >= 1"
          >领取任务</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getByIdErrand, getErrandEdit } from "@/util/errand.js";

export default {
  data() {
    return {
      topBg:
        "http://175.178.92.128:8087/campus_help_system/images/insidePages/20190910163919740.jpg",
      initData: {},
    };
  },
  created() {
    this.getByIdErrand();
  },
  mounted() {},
  methods: {
    // 初始化数据
    async getByIdErrand() {
      let { data: res } = await getByIdErrand({
        id: this.$route.params.id,
      });
      this.initData = res.data;
    },
    // 接受任务
    async clickTakeOrders() {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }
      let query = {
        id: this.$route.params.id,
        receiverUsersId: "",
        receiverUsersName: "",
        receiverUsersTelephone: "",
        receiveAt: "",
        status: 1,
      };
      query.receiverUsersId = window.localStorage.getItem("id");
      query.receiverUsersName = window.localStorage.getItem("userName");
      query.receiverUsersTelephone = window.localStorage.getItem("telephone");
      query.receiveAt = new Date();
      let { data: res } = await getErrandEdit(query);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.getByIdErrand();
    },
  },
};
</script>
<style lang="less" scoped>
.taskPublishing {
  padding-bottom: 50px;
  .top_img {
    height: 280px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    & > span {
      font-size: 48px;
      font-weight: 700;
      color: #fff;
    }
  }
  .main {
    padding: 50px 0;
    width: 1200px;
    margin: 0 auto;
    .col_title {
      position: relative;
      margin-bottom: 24px;
      span {
        font-size: 28px;
        font-weight: 700;
        background-color: #fff;
        display: inline-block;
        padding: 0 12px;
        margin-left: 50px;
      }
      i {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 1px;
        background-color: #999;
        z-index: -1;
      }
    }
    .name_time_tel {
      margin-bottom: 24px;
      & > span {
        display: inline-block;
        padding: 0 5px;
        background-color: #999;

        margin-right: 24px;
        color: #fff;
      }
      & > span:last-child {
        background-color: #fff;
      }
    }
    .col_content {
      font-size: 18px;
      margin-bottom: 24px;
    }
    .btn {
    }
  }
}
</style>
